import React, { Component } from 'react'
import CardContainer from '../component/card.container'
import ReactEcharts from '../lib/echarts-for-react/src/index'
import log from '../lib/log'

import '../sass/module/company.angle.scss'

/**
 * @describe: 公司构成angle图
 */
class CompanyAngle extends Component {
  constructor(props) {
    super(props)
  }
  // did mount
  componentDidMount() {
    log('company angle charts mounted')
  }

  // charts option 1
  getOptions1() {
    return {
      backgroundColor: ['#ebd200', ' #ffa623', '#ff7b23', '#ff4223'],
      grid: {
        top: 0,
        left: 0,
        right: 0,
        bottom: 0
      },
      series: [
        {
          type: 'pie',
          radius: '55%',
          // minAngle: 60,
          color: ['#ebd200', ' #ffa623', '#ff7b23', '#ff4223'],
          toolTip: {
            show: false
          },
          lengend: {
            show: false
          },
          data: [{
            name: '初创企业',
            value: 223
          }, {
            name: '接近规模企业',
            value: 342
          }, {
            name: '规模企业',
            value: 360
          }, {
            name: '挂牌上市企业',
            value: 170
          }],
          roseType: 'angle',
          label: {
            normal: {
              show: false,
              textStyle: {
                color: 'rgba(255, 255, 255, 0.3)',
                opacity: 0
              }
            }
          },
          labelLine: {
            normal: {
              show: false,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)',
                opacity: 0
              }
            }
          },
          itemStyle: {
            normal: {
              show: false,
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
  }

  // charts option 2
  getOptions2() {
    return {
      // backgroundColor: ['#ebd200', ' #ffa623', '#ff7b23', '#ff4223'],
      grid: {
        top: 0,
        left: 0,
        right: 0,
        bottom: 0
      },
      series: [
        {
          type: 'pie',
          radius: '55%',
          color: ['#00b7eb', '#0085eb', '#0058eb', '#0037eb', '#7400eb'],
          toolTip: {
            show: false
          },
          lengend: {
            show: false
          },
          data: [{
            name: '电子商务产业',
            value: 168
          }, {
            name: '健康服务产业',
            value: 110
          }, {
            name: '工程科技产业',
            value: 129
          }, {
            name: '文化创意产业',
            value: 211
          }, {
            name: '研发设计服务',
            value: 108
          }, {
            name: '咨询培训产业',
            value: 142
          }],
          roseType: 'angle',
          label: {
            normal: {
              show: false,
              textStyle: {
                color: 'rgba(255, 255, 255, 0.3)',
                opacity: 0
              }
            }
          },
          labelLine: {
            normal: {
              show: false,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)',
                opacity: 0
              }
            }
          },
          itemStyle: {
            normal: {
              show: false,
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
  }

  // render dom
  render() {
    let { list1, list2 } = this.props
    return (
      <CardContainer>
        <span className="border-corner border-lt p-left p-top" />
        <span className="border-corner border-rt p-right p-top" />
        <span className="border-corner border-lb p-left p-bottom" />
        <span className="border-corner border-rb p-right p-bottom" />
        <h3>双创企业构成</h3>
        <div className="row">
          <div className="process-50">
            {list1.map((item, index) => {
              return (
                <div key={index} className="process" style={{ textAlign: 'right' }}>
                  <span className="process-label">{item.pend}</span>
                  <span className="process-bar" style={{ width: item.ratio + '%' }} />
                  <span className="process-company" style={{ display: 'inline-block', width: '80px', textAlign: 'center' }}>
                    {item.label}
                  </span>
                </div>
              )
            })}
          </div>
          <ReactEcharts
            className="span-50"
            option={this.getOptions1()}
            notMerge={true}
            lazyUpdate={true}
            style={{ height: '150px', width: '150px', marginTop: '-40px' }}/>
        </div>
        <div className="row" style={{marginTop: "-8px"}}>
          <ReactEcharts
            className="span-50"
            option={this.getOptions2()}
            notMerge={true}
            lazyUpdate={true}
            style={{ height: '150px', width: '150px', marginTop: '-40px' }}/>
          <div className="process-50">
            {list2.map((item, index) => {
              return (
                <div key={index} className="process" style={{ textAlign: 'left' }}>
                  <span className="process-label">{item.label}</span>
                  <span className="process-bar" style={{ width: item.ratio + '%' }} />
                  <span className="process-company" style={{ display: 'inline-block', width: '80px', textAlign: 'center' }}>
                    {item.pend}
                  </span>
                </div>
              )
            })}
          </div>
        </div>
      </CardContainer>
    )
  }
}

CompanyAngle.defaultProps = {
  list1: require('../api.mock/qiyegoucheng.1.json'),
  list2: require('../api.mock/qiyegoucheng.2.json')
}

export default CompanyAngle